import React, { useEffect, useState } from "react";
import "./index.scss";
import Tabbar from "@/components/Tabbar";
import Icon from "@/components/Icon";
import { Swiper, Grid } from "antd-mobile";
import { fetchBanner, fetchCate, fetchItem } from '@/api/home'
// 下拉加载
import InfiniteScroll from 'react-infinite-scroll-component';
import { useNavigate } from "umi";
import Item from './item'
export default function index() {
  const navigate = useNavigate()
  // 获取轮播图信息
  const [bannner, setbanner] = useState([])
  const getBanner = () => {
    fetchBanner().then(res => {
      if (res.data.code === 0) {
        setbanner(res.data.data)
      }
    })
  }
  // 获取分类列表，并将其分成两个数组
  const [cateTop, setCateTop] = useState<Array<any>>([])
  const [cateBottom, setCateBottom] = useState<Array<any>>([])
  const getCate = () => {
    fetchCate().then(res => {
      // console.log(res);
      if (res.data.code === 0) {
        let arr1: any = []
        let arr2: any = []
        res.data.data.forEach((cate: any) => {
          if (arr1.length < 6) {
            arr1.push(cate)
          } else {
            arr2.push(cate)
          }
        });
        // console.log(arr1, 11);
        // console.log(arr2, 22);
        setCateTop([...arr1])
        setCateBottom([...arr2])
      }
    })
  }
  // 鼠表滚轮滚动变化
  const [gunlun, setgunlun] = useState(false)
  // 获取商品的信息
  // hasmore
  const [hasmore, setHasMore] = useState(true)
  const [itemList, setitem] = useState<any[]>([])
  const [page, setPage] = useState(1)
  const getItem = () => {
    fetchItem({
      page,
      pageSize: 5
    }).then(res => {
      // console.log(res);
      if (res.data.code === 0) {
        setitem([
          ...itemList,
          ...res.data.data.result
        ])
      }
      if (res.data.code === 700) {
        setHasMore(false)
      }
    })
  }
  // 上拉触底事件
  const chuDi = () => {
    setPage(page + 1)
  }
  // 点击商品进入商品闲情页面，并携带id
  const toCateDetail = (id: number) => {
    navigate(`/itemDetail?itemId=${id}`)
  }
  useEffect(() => {
    getItem()
  }, [page])
  useEffect(() => {
    getBanner()
    getCate()
    // getItem()
  }, [])
  interface bartype {
    id: number,
    picUrl: string
  }
  return (
    <>
      {/* 头部搜素，点击进入具体的搜素页面 */}
      <div className={`header ${gunlun ? 'headerColor' : ''}`}>
        <div className="logo"></div>
        <div className="headerInput" onClick={() => {
          navigate('/search')
        }}>
          <Icon name="icon-search"></Icon>
          酒仙年货节：满999-100  +1元得招财小元宝酒
        </div>
      </div>
      <div className="contain" onWheel={() => {
        const juli = document.documentElement.scrollTop || document.body.scrollTop
        if (juli > 100) {
          setgunlun(true)
        } else if (juli === 0) {
          setgunlun(false)
        }

      }}>
        {/* 轮播图 */}
        <div className="swiperDiv">
          <Swiper autoplay loop>
            {
              bannner.map((bar: bartype) => (
                <Swiper.Item key={bar.id}>
                  <img src={bar.picUrl} />
                </Swiper.Item>
              ))
            }
          </Swiper>
        </div>
        <div className="daoHanDiv">
          <Grid columns={6} gap={12}>
            {
              cateTop.map((cate: any) => (
                <Grid.Item key={cate.id}>
                  <div className="daHanCate" onClick={
                    () => {
                      navigate('/listDetail', {
                        state: {
                          name: cate.name
                        }
                      })
                    }
                  }>
                    <div className="daoHanImg">
                      <img src={cate.icon} alt="" />
                    </div>
                    <p>{cate.name}</p>
                  </div>
                </Grid.Item>
              ))
            }
          </Grid>
          <Grid style={{ marginTop: 10 }} columns={5} gap={12}>
            {
              cateBottom.map((cate: any) => (
                <Grid.Item key={cate.id}>
                  <div className="daHanCate" onClick={
                    () => {
                      navigate('/listDetail', {
                        state: {
                          name: cate.name
                        }
                      })
                    }
                  }>
                    <div className="daoHanImg">
                      <img src={cate.icon} alt="" />
                    </div>
                    <p>{cate.name}</p>
                  </div>
                </Grid.Item>
              ))
            }
          </Grid>
        </div>
        <InfiniteScroll
          dataLength={itemList.length} //This is important field to render the next data
          next={chuDi}
          hasMore={hasmore}
          loader={<h4>Loading...</h4>}
          endMessage={
            <p style={{ textAlign: 'center' }}>
              <b>Yay! You have seen it all</b>
            </p>
          }
        >
          {/* {items} */}
          <Item itemsinger={itemList} toCateDetail={toCateDetail} fn2={() => {

          }} />
        </InfiniteScroll>

      </div>

      <Tabbar />
    </>
  );
}
